<template>
	<view>
		
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		
		<view class="content">
			<view v-if="current === 0">
				<!-- 搜索框 -->
				<uni-search-bar class="search1" @confirm="search1" :focus="false" v-model="searchValue"
					placeholder="请输入设备名称" @cancel="cancel" @clear="cancel" />
				<!-- 显示设备信息 -->
				<view v-for="(item, index) in tableData" :key="index">
					<uni-card :title="item.instrumentName" extra=">" @click="check(item.id)">
						<view class="interval">
							<text class="card-text">编号：{{item.instrumentId}}</text>
							<text class="card-text1">规格：{{item.specification}}</text>
						</view>
						<view class="interval">
							<text class="card-text">型号：{{item.modelNumber}}</text>
						</view>
						<view class="interval">
							<text class="card-text">存放地：{{item.storageLocation}}</text>
						</view>
						<view class="interval">
							<text class="card-text">领用人：{{item.receiverName}}</text>
							<text class="card-text2">类型：{{type(item.equipmentType)}}</text>
						</view>
						<view class="check-mark">
							<text class="inx">序号.{{indexMethod(index)}}</text>
						</view>
					</uni-card>
				</view>
			</view>
			
			<view v-if="current === 1">
				<!-- 搜索框 -->
				<uni-data-select class="search" placeholder="请选择设备类型" :localdata="dataTree" v-model="value" @change="change"></uni-data-select>
				<!-- 显示设备信息 -->
				<view v-for="(item, index) in tableData" :key="index">
					<uni-card :title="item.instrumentName" extra=">" @click="check(item.id)">
						<view class="interval">
							<text class="card-text">编号：{{item.instrumentId}}</text>
							<text class="card-text1">规格：{{item.specification}}</text>
						</view>
						<view class="interval">
							<text class="card-text">型号：{{item.modelNumber}}</text>
						</view>
						<view class="interval">
							<text class="card-text">存放地：{{item.storageLocation}}</text>
						</view>
						<view class="interval">
							<text class="card-text">领用人：{{item.receiverName}}</text>
							<text class="card-text2">类型：{{type(item.equipmentType)}}</text>
						</view>
						<view class="check-mark">
							<text class="inx">序号.{{indexMethod(index)}}</text>
						</view>
					</uni-card>
				</view>
			</view>
			
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change1" />
			</view>
			<view style="height: 20px;"></view>
		</view>
	</view>
</template>


<script>
	import {
		listEquipment
	} from "@/api/module/lyq/equip.js"

	export default {
		data() {
			return {
				// 每页数据量
				pageSize: 3,
				// 当前页
				pageCurrent: 1,
				tableData: [],
				value: 0,
				dataTree: [],
				sexOptions: [],
				equipType: [],
				equipOptions: [],
				// 数据总量
				total: 0,
				equipTotal: 0,
				// 遮罩层
				loading: false,
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 表单参数
				form: {},
				items: ['名称查询', '类型查询'],
				// 新增内容
				// 分段颜色
				activeColor: '#007aff',
				// 分段方式（文本：text；按钮：button）
				styleType: 'text',
				// 页面
				current: 0,
				// 搜索框输入
				searchValue: '',
				// 用户信息
				userTableData: [],
				// 参数
				queryParams: {
					pageNum: 1,
					pageSize: 3,
					instrumentId: null,
					instrumentName: null,
					equipmentType: null,
					applicationDepartment: null,
					modelNumber: null,
					specification: null,
					unitPrice: null,
					classifyNumber: null,
					purchaseDate: null,
					receiverId: null,
					receiverName: null,
					manufacturers: null,
					storageDate: null,
					storageLocation: null,
					userId: null,
					deptId: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					note1: null,
					note2: null,
					note3: 0,
					note4: null,
					note5: null,
					note6: null,
					note7: null,
					note8: null,
					note9: null,
					note10: null
				},
			}
		},

		// 生成时
		created() {
			this.getList();
			this.getDicts("yh_equip_type").then(response => {
				this.equipOptions = response.data;
				for (var j = 0; j < this.equipOptions.length; j++) {
					this.equipType[this.equipOptions[j].dictValue] = this.equipOptions[j].dictLabel
				}
				this.getList();
			});
			this.getDicts("yh_equip_type").then(response => {
				this.sexOptions = response.data
				for (var i = 0; i < this.sexOptions.length; i++) {
					this.dataTree.push({
						value: this.sexOptions[i].dictValue,
						text: this.sexOptions[i].dictLabel,
					})
				}
			});
		},
		methods: {
			// 显示转换
			type: function(equipType) {

				return this.equipType[equipType]
			},
			// 计算序号值
			code: function(index) {
				return index + 1 + (this.pageCurrent - 1) * this.pageSize
			},

			// 查库
			getList() {
				this.loading = true;
				listEquipment(this.queryParams).then(res => {
					this.tableData = res.rows;
					this.total = res.total;
					this.loading = false;
				});
			},
			indexMethod(index) {
				/* console.log((this.pageCurrent-1)*this.pageSize+index+1) */
				return (this.pageCurrent - 1) * this.pageSize + index + 1
			},
			change(e) {
				this.queryParams.equipmentType = e;
				this.handleQuery();
			},
			// 搜索取消
			cancel(res) {
				// console.log(res);
				this.reset();
				this.getList();
			},
			// 重置
			reset() {
				this.current = 0;
				this.queryParams = {
					// pageNum: 1,
					pageNum: 1,
					pageSize: 3,
					instrumentId: null,
					instrumentName: null,
					equipmentType: null,
					applicationDepartment: null,
					modelNumber: null,
					specification: null,
					unitPrice: null,
					classifyNumber: null,
					purchaseDate: null,
					receiverId: null,
					receiverName: null,
					manufacturers: null,
					storageDate: null,
					storageLocation: null,
					userId: null,
					deptId: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					note1: null,
					note2: null,
					note3: null,
					note4: null,
					note5: null,
					note6: null,
					note7: null,
					note8: null,
					note9: null,
					note10: null
				}
			},
			// 日历
			check(ids) {
				const id = ids
				// console.log(ids)
				this.$tab.navigateTo('/pages/module/lyq/calendar?id=' + ids)
			},

			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			// 查询按钮
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.pageCurrent = 1;
				this.getList();
			},
			// 分页触发
			change1(e) {
				/* this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0 */
				// console.log(e)
				this.queryParams.pageNum = e.current
				this.pageCurrent = e.current
				// console.log(this.queryParams.pageNum)
				this.getList(e.current)
			},

			// 新增内容
			// 切换字段
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.queryParams.pageNum = 1
				this.pageCurrent = 1
				// console.log(this.pageCurrent)
				// console.log(this.queryParams.pageNum)
				this.getList()
			},
			search1(res) {
				this.queryParams.instrumentName = res.value;
				this.handleQuery();
			},

		},
	}
</script>


<style lang="scss">
	.a {
		float: left;
		position: relative;
		text-align: left;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.interval {
		margin: 10px;
	}

	// page {
	// 	background-color: #ffffff;
	// }

	.uni-common-mt {
		background-color: #fff;
		// margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		text-align: center;
		font-weight: bold;
	}

	.check-mark {
		// display: block;
		text-align: left;
	}

	.msg-tag.wait {
		background: #55BBFF;
		font-weight: normal;
		margin-left: 35%;
	}

	.card-text {
		font-weight: normal;
		// margin: 2px;

		color: #000000;
	}

	.card-text1 {
		font-weight: normal;
		margin-left: 10px;

		color: #000000;
	}

	.card-text2 {
		font-weight: normal;
		margin-left: 10px;

		color: #0000FF;
	}

	.msg-tag {
		position: relative;
		color: #fff;
		text-transform: uppercase;
		padding: 3px 10px;
		font-size: 10px;
		border-radius: 50px;
	}

	.search1 {
		// color: #FFF;
		text-align: left;
	}

	.search {

		width: 90%;
		margin-top: 4%;
		margin-bottom: 5%;
		margin-left: 5%;
		font-size: 10px;
		background-color: #fff;

	}

	.inx {

		font-weight: normal;
		color: #000000;
	}
</style>
